<template>
    <yk-space dir="vertical" >
         <TopTitle name="博客文章" :is-search="true" style="width: 100%; margin-bottom: 8px;" @search="search"/>
         <Subset :classify="0" @nowSubset="nowSubset" v-show="query"/>
         <yk-space  style="width: 100%;">
                <ArticleView  style="width: 75%; margin-bottom: 48px;" :state="nowState" :subsetId="nowSubsetId" :searchTerm="searchTerm" :pageSize="4"/>
            <Labels style="width: 25%;flex:none;" />
         </yk-space>
    </yk-space>
</template>
<script setup lang="ts">
import TopTitle from '../components/bar/TopTitle.vue';
import Subset from '../components/subset/subset.vue';
import Labels from '../components/labels/label.vue';
import ArticleView from '../components/articles/article.vue';
import { ref } from 'vue';



const nowState = ref<number>(-1) //当前是否发布状态,nowState:-1:全部，0:未发布，1:已发布
const nowSubsetId = ref<number>(-1) //当前分组id,nowSubsetId:-1:全部，其他:分组id
//当你点击分组组件模块中的如“全部”、“未发布”、“已发布”、“未分类”的元素时，会触发该事件
const nowSubset = (e:{id: number, type:string}) => {
    //点击“全部”时，nowState:-1,nowSubsetId:-1
    if(e.type === 'all'){
        nowState.value = -1
        nowSubsetId.value = -1
    //点击”未分类“时，nowState:-1,nowSubsetId:”（全部分类的id合集）“
    //点击某一个分类时，nowState:-1,nowSubsetId:该分类的id
    } else if(e.type === 'subset' || e.type==='exclude'){
        nowState.value = -1
        nowSubsetId.value = e.id
    //点击“未发布”或“已发布”时
    //点击“未发布”时，nowState:0,nowSubsetId:-1
    //点击“已发布”时，nowState:1,nowSubsetId:-1
    } else if(e.type ==='state' ){
        nowState.value =e.id
        nowSubsetId.value = -1
    }
} 


//搜索事件
const searchTerm = ref<string>('')
const query=ref<boolean>(true)
const search = (val: string) => {
    searchTerm.value = val
    if(val){
        query.value = false
    }else{
        query.value = true
    }
}
</script>
<style scoped lang="less">
</style>